<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <template #header>
          <TreeTools :treeNode="rootNode" isRoot @add="addDept" />
        </template>
        <template #default>
          <!-- 如果只填充默认插槽， v-slot 可以直接写在 组件标签上，否则 v-slot 只能写在 template 标签上 -->
          <!-- 
            因为目前我们是自定义 el-tree 的节点显示内容，所以 :props 的 label 不用配置了，
            而 children 默认就是 children，所以也不用配了，
            所以 :props 就直接干掉了
           -->
          <!-- v-loading="loading" -->
          <!-- class="myTree" -->
          <el-tree
            ref="tree"
            :data="departs"
            default-expand-all
            #default="{ data }"
          >
            <!-- 这里的填充的插槽内容会作为每一个树节点的内容显示 -->
            <!-- el-tree 组件内部会循环 :data="departs" 这个，有多少个节点，就会循环多少次 -->
            <!-- #default="{ data }" 这里的 data 是接收的 el-tree 默认插槽上 暴露出来的 每一次循环的 数据 -->
            <!-- <template #default="{ data, node }"> -->
            <TreeTools
              :treeNode="data"
              @deleted="getDepartments"
              @add="addDept"
              @edit="editDept"
            />
            <!-- </template> -->
          </el-tree>
        </template>
      </el-card>
    </div>

    <!-- visible 属性也支持 sync 修饰符，假设弹层没有封装组件，是直接写在 组织架构页面的，那么就可以加 sync 修饰符来简化代码 -->
    <!-- <el-dialog :visible.sync="showDialog"></el-dialog> -->

    <AddDept
      :showDialog.sync="showDialog"
      :treeNode="node"
      @add="getDepartments"
    />

    <EditDept
      :showDialog.sync="showDialogOfEdit"
      :treeNode="node"
      @edit="getDepartments"
    />
  </div>
</template>

<script>
import TreeTools from './components/TreeTools';
import AddDept from './components/AddDept';
import EditDept from './components/EditDept';
import { getDepartments } from '@/api/departments';
import { tranListToTreeData, tranListToTreeDataByGroup } from '@/utils';
export default {
  name: 'Departments',
  components: { TreeTools, AddDept, EditDept },
  data() {
    return {
      node: null, // 用来临时保存点击的节点数据
      showDialog: false, // 是否显示新增部门弹层
      showDialogOfEdit: false, // 是否显示编辑部门弹层
      loading: false,
      rootNode: {
        id: '', // 因为一级部门的 pid 是空字符串，所以 根节点的 id 就应该为 空字符串
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }],
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' },
      ],
    };
  },
  async created() {},
  async mounted() {
    await this.getDepartments();
  },
  methods: {
    editDept(treeNode) {
      this.showDialogOfEdit = true;
      this.node = treeNode; // 赋给父组件的数据  子组件要更新 必须 父组件先更新吧！ 所以说 props 传值是异步的。
      // 我并没有在这去调用子组件的方法，去获取详情数据 回显到表单中
    },
    addDept(treeNode) {
      this.showDialog = true;
      this.node = treeNode; // 赋给父组件的数据  子组件要更新 必须 父组件先更新吧！ 所以说 props 传值是异步的。
    },
    async getDepartments() {
      // this.loading = true;
      // try {
      // console.log(this.$refs.tree, 'this.$refs.tree');

      const res = await getDepartments({ target: this.$refs.tree.$el });
      // const res = await getDepartments({target: '.myTree'});
      this.rootNode.name = res.companyName;
      this.departs = tranListToTreeData(res.depts, '');
      // this.departs = tranListToTreeDataByGroup(res.depts, 'pid', '');
      // } finally {
      //   this.loading = false;
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
